<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>KISSY.gallery.Countdown 倒计时组件</title> 
	<link rel="shortcut icon" href="../../../../kissy-dpl/base/assets/favicon.ico"/> 
	<link rel="stylesheet" href="../../../../kissy-dpl/base/assets/reset.css"/> 
	<link rel="stylesheet" href="../../../../kissy-dpl/base/assets/kissy-docs.css"/>
	<style>
		.box{
			padding:10px;
			margin-bottom:10px;
			background:#ffefd5;
			border:2px solid #ccc;
		}
		.section{
			margin:10px 0;
		}
		dl.data {
			padding-bottom: 15px;
			margin-bottom: 15px;
			border-bottom: 1px dotted #CCC;
		}
		dl.data dt {
			margin-bottom: 10px;
		}
		dl.data dd {
			margin: 0 0 0 30px;
		}
	</style>
	<script src="http://docs.kissyui.com/kissy/build/kissy.js"></script> 
	<script src="../../../../kissy-dpl/base/assets/kissy-docs.js"></script> 
	<!--
	<script src="easycountdown.js"></script> 
	-->
	<script>
		KISSY.config({
			packages:[
				{
					name:"gallery",
					tag:"20111224",
					path:"../../../",  // cdn上适当修改对应路径
					charset:"gbk"
				}
			]
		});
	</script>

	
	
	
</head>
<body>
    <div id="header"> 
		<h1 class="logo"><a alt="KISSY" href="http://kissyui.com/"><img src="../../../../kissy-dpl/base/assets/logo.png"/></a></h1> 
		<div class="sub-title">Gallery</div>
		<ul class="navigation"> 
			<li><a href="http://blog.kissyui.com/">博客</a></li> 
			<li><a href="http://github.com/kissyteam">源码</a></li> 		
		</ul>
		
	</div> 
    <div id="content">
		<div class="s-crumbs">
			<span>当前位置：</span>
			<a href="http://kissyui.com/">KISSY</a>
			<a href="../../../index.html">Gallery</a>
			<span>Countdown</span>
		</div>
			<pre class="s-section">				
作者：satans17@gmail.com(常胤)
功能：到计时组件
描述：Countdown的实现不同于传统的倒计时组件，剩余时间根据需要去fetch,而不是依赖setInterval,所以容易扩展或者定制有特殊需求的倒计时。
源码：<a href="easycountdown.js">easycountdown.js</a></pre>


<div style="margin:20px 0;">下面的demo我没有在UI上花功夫，因为每个人的要求都不一样，我只展示了Countdown的功能，相信无论怎么特殊的要求都能满足你。</div>



			
			<h3 class="s-title">使用Easycountdown.autoRender();自动渲染组件</h3>

			
			<div class="s-section">
				<div class="s-demo">
				
					<div class="box">
						<div class="J_TWidget" data-widget-type="Countdown" data-widget-config="{'endTime':'100000','interval':100}">
							<div class="ks-countdown-run"><b>类似switchable.autoRender的简单配置</b>，从当前算起倒计时100000毫秒</div>
							<div class="ks-countdown-run">
								还剩
								<b class="ks-d"></b>天
								<b class="ks-h"></b>小时
								<b class="ks-m"></b>分
								<b class="ks-s"></b>秒
								<b class="ks-i"></b>毫秒
							</div>
							<div  class="ks-countdown-end">
								结束了我要显示出来
							</div>
						</div>
					</div>
					
					
					
					
						
					<div class="box">
						<div>
							<div class="J_TWidget" data-widget-type="Countdown" data-widget-config="{'endTime':'100000000','interval':100}">
								<div class="ks-countdown-run"><b>时间单位随意组合</b>，从当前算起倒计时100000000毫秒</div>
								<div class="ks-countdown-run">
									还剩
									<b class="ks-d"></b>天
									<b class="ks-s"></b>秒
								</div>
								<div  class="ks-countdown-end">
									结束了我要显示出来
								</div>
							</div>
						</div>
						<div>
							<div class="J_TWidget" data-widget-type="Countdown" data-widget-config="{'endTime':'100000000','interval':100}">
								<div class="ks-countdown-run">
									还剩
									<b class="ks-d"></b>天
									<b class="ks-h"></b>小时
								</div>
							</div>
						</div>
						<div>
							<div class="J_TWidget" data-widget-type="Countdown" data-widget-config="{'endTime':'100000000','interval':100}">
								<div class="ks-countdown-run">
									还剩
									<b class="ks-h"></b>小时
									<b class="ks-m"></b>分钟
								</div>
							</div>
						</div>
						<div>
							<div class="J_TWidget" data-widget-type="Countdown" data-widget-config="{'endTime':'100000000','interval':100}">
								<div class="ks-countdown-run">
									还剩
									<b class="ks-h"></b>小时
									<b class="ks-m"></b>分钟
									<b class="ks-s"></b>秒
								</div>
							</div>
						</div>
						<div>
							<div class="J_TWidget" data-widget-type="Countdown" data-widget-config="{'endTime':'100000000','interval':100}">
								<div class="ks-countdown-run">
									还剩
									<b class="ks-h"></b>小时
								</div>
							</div>
						</div>
						<div>
							<div class="J_TWidget" data-widget-type="Countdown" data-widget-config="{'endTime':'100000000','interval':100}">
								<div class="ks-countdown-run">
									还剩
									<b class="ks-s"></b>秒
									<b class="ks-m"></b>分钟
								</div>
							</div>
						</div>
						<div>
							<div class="J_TWidget" data-widget-type="Countdown" data-widget-config="{'endTime':'100000000','interval':100}">
								<div class="ks-countdown-run">
									还剩
									<b class="ks-m"></b>分
								</div>
							</div>
						</div>
						<div>
							<div class="J_TWidget" data-widget-type="Countdown" data-widget-config="{'endTime':'100000000','interval':100}">
								<div class="ks-countdown-run">
									还剩
									<b class="ks-s"></b>秒
								</div>
							</div>
						</div>
						<div>
							<div class="J_TWidget" data-widget-type="Countdown" data-widget-config="{'endTime':'100000000','interval':100}">
								<div class="ks-countdown-run">
									还剩
									<b class="ks-i"></b>毫秒
								</div>
							</div>
						</div>
					</div>
					
					
					
					
					<div class="box">
						<div class="J_TWidget" data-widget-type="Countdown" data-widget-config="{'endTime':'10000','interval':100}">
							<div class="ks-countdown-run">倒计时完成后可以自动隐藏container中所有的.ks-countdown-run,显示所有的.ks-countdown-end，待会我就隐藏了</div>
							<div class="ks-countdown-run">
								还剩<b class="ks-i"></b>毫秒
							</div>
							<div  class="ks-countdown-end" style="color:red;">倒计时完了，我显示了</div>
							<div  class="ks-countdown-end" style="color:red;">倒计时完了，我也显示了</div>
						</div>
					</div>
						

					<script>
						KISSY.ready(function(S){
							S.use("gallery/easycountdown/1.0/easycountdown", function(S,EasyCountdown){
								EasyCountdown.autoRender();
							})
						})						
					</script>
				</div>
				<a class="s-view-code" href="#">显示源码</a>
			</div>
			
			
			
			<h3 class="s-title">自己实例化EasyCountdown();</h3>
			<div class="s-section">
				<div class="s-demo">
				
					<div class="box">
						<div id="J_demo2">
							<div class="ks-countdown-run">
								距离2012-8-1 12:12:12还剩
								<b class="ks-d"></b>天
								<b class="ks-h"></b>小时
								<b class="ks-m"></b>分
								<b class="ks-s"></b>秒
								<b class="ks-i"></b>毫秒
							</div>
							<div  class="ks-countdown-end">
								结束了我要显示出来
							</div>
						</div>
					</div>
					
					<script>
						KISSY.ready(function(S){
							S.use("gallery/easycountdown/1.0/easycountdown", function(S,EasyCountdown){
								new EasyCountdown("#J_demo2","2012-8-1 12:12:12",{
									interval:500
								})
							})
						})						
					</script>

					
					
				</div>
				<a class="s-view-code" href="#">显示源码</a>
			</div>
			
			
			
			
			
			
			
			
			
			
			
			<h3 class="s-title">使用Easycountdown.Core();</h3>
			<div class="s-section">
				<div class="s-demo">
				
					KISSY.Gallery.Countdonw还公开了Core方法，你可以自己定制或者扩展特殊需求的倒计时功能,其中的getRemain()，format()，fetch()方法都可以使用
				
					<div class="box">
						调用fetch()方法以剩余时间为参数定时执行回调函数
						<div>
							<div>还剩<span id="J_d11"></span>毫秒</div>
						</div>
					</div>
					
					
					<div class="box">
						调用getRemain()方法获取截至到当前的剩余时间
						<div>
							<div>还剩<span id="J_d12"></span>秒</div>
						</div>
					</div>
					
					<div class="box">
						format(time（毫秒）,[d/h/m/s/i])；根据指定时间返回格式化时间数组。例如：format(60001,"s","i");//[60,1]   60秒1毫秒
						<div>
							<div><span id="J_d13"></span></div>
						</div>
					</div>
					
					
					
					<script>
						KISSY.ready(function(S){
							S.use("gallery/easycountdown/1.0/easycountdown", function(S,EasyCountdown){
								var test = new EasyCountdown.Core("2012-8-1 12:12:12");
								
								test.fetch(500,function(remain){
									S.get("#J_d11").innerHTML = remain
								})
								
								setInterval(function(){
									S.get("#J_d12").innerHTML = parseInt(test.getRemain()/1000);
								},500);
								
								
								test.fetch(500,function(remain){
									S.get("#J_d13").innerHTML = test.format(remain,"d","h","m","s","i").join(" , ");
									
								})
								
							})
						
						

								
							
						})						
					</script>

					
				</div>
				<a class="s-view-code" href="#">显示源码</a>
			</div>
			
			
			
			
			
			
			
			
			
			
			<h3 class="s-title">API</h3>	
			<div class="s-section">
				<h2>Config Attributes Detail</h2>
				<dl class="data">
					<dt id="Suggest.containerCls">
						<tt class="descclassname">Countdown.</tt>
						<tt class="descname">timeBegin</tt>
					</dt>
					<dd>
						<p>{Date} - 开始时间，默认取系统当前时间</p>
					</dd>
				</dl>
			</div>

			
			<div class="s-section">
				<h2>Methods Detail</h2>
				<dl class="data">
					<dt>
						<tt class="descname">getRemain()</tt>
					</dt>
					<dd>
						<p>获取截至到当前的剩余时间</p>
					</dd>
				</dl>
				<dl class="data">
					<dt>
						<tt class="descname">fetch()</tt>
					</dt>
					<dd>
						<p>调用fetch()方法以剩余时间为参数定时执行回调函数</p>
					</dd>
				</dl>
				<dl class="data">
					<dt>
						<tt class="descname">format()</tt>
					</dt>
					<dd>
						<p>根据指定时间返回格式化时间数组。例如：format(60001,"s","i");//[60,1]   60秒1毫秒</p>
					</dd>
				</dl>
			</div>


			<h3 class="s-title">Note</h3>			
			<div class="s-section">
				<ul class="s-list">
					<li>your note</li>
				</ul>
			</div>
    </div>
    <div id="footer">
        &copy; Copyright 2010~2011, KISSY Team.
    </div>
</body>
</html>